<script lang="ts" setup>
import { imgUrl } from '../assets/common/constants';
import { userInfoStore } from '../assets/userStore/userStore';
import { useRouter } from 'vue-router';
import { onMounted, ref } from 'vue';
import { queryMessage, queryUser } from '../assets/net/NetUtils';
import { UserModel } from '../assets/model/User';

const router = useRouter();
const userStore = userInfoStore();
const isAdmin = ref()
const hasStore = ref<boolean>(false)
const num = ref()
const imageUrl = ref<string>()

onMounted(() => {
    router.push('/personalinfo')
    queryUser(userStore.phoneNumber)
        .then((value: UserModel) => {
            isAdmin.value = value.isAdmin
            userStore.update(value.uid, value.username, value.phoneNumber, value.image?.url)
            hasStore.value = value.stores === null ? false : true;
            imageUrl.value = value.image === null ? 'src/assets/resource/ic_user_portrait.svg' : `/api/image/${value.image?.url}`;
        })
    queryMessage(userStore.uid)
        .then((value) => {
            num.value = value.data.length
        })
})

const home = () => {
    router.replace('/')
}

const infoClick = () => {
    router.replace('/personalinfo')
}
const shoppingCarClick = () => {
    router.replace('/shoppingcar')
}
const myOrderClick = () => {
    router.replace('/myorder')
}
const addCommodityClick = () => {
    router.replace('/addcommodity')
}
const myCommoditiesClick = () => {
    router.replace('/mycommodities')
}
const updateInfoClick = () => {
    router.replace('/updateinfo')
}
const myAddressClick = () => {
    router.replace('/myaddress')
}

const transitOrder = () => {
    router.replace('/transitorder')
}

const finishOrder = () => {
    router.replace('/finishorder')
}

const adminApplyStore = () => {
    router.replace('/adminapplystore')
}

const adminApplyCommodity = () => {
    router.replace('/adminapplyCommodity')
}

const applyStore = () => {
    router.replace('/applystore')
}

const addRecommend = () => {
    router.replace('/addrecommend')
}

const myMessage = () => {
    router.replace('/mymessage')
}

const myStore = () => {
    router.replace('/myStore')
}
</script>

<template>
    <el-row class="header_profile" justify="space-between">
        <el-image style="width: auto; height: auto;" :src=imgUrl fit="none" />
        <el-text style="color: white;font-size: xx-large; background-color: #fbaf5a;">
            我的
        </el-text>
    </el-row>
    <el-row style="width: 100%;padding: 2%;" type="flex" justify="space-around">
        <el-col :span="24">
            <el-breadcrumb separator="/" style="padding: 1%;">
                <el-breadcrumb-item @click="home">首页</el-breadcrumb-item>
            </el-breadcrumb>
        </el-col>
        <el-col class="sider" :span="5">
            <el-col style="margin-top: 10%;" align="middle" :span="24">
                <el-image class="imgInfo" :src="imageUrl" />
            </el-col>
            <el-col style="margin-top: 2%;" align="middle" :span="24">
                <el-text class="font_main">{{ userStore.username }}</el-text>
            </el-col>
            <el-col style="margin-top: 2%;" align="middle" :span="24">
                <el-text class="font_common">UID：{{ userStore.uid }}</el-text>
            </el-col>
            <el-col style="margin-top: 10%; " :span="24">
                <el-menu>
                    <el-sub-menu index="1" style="color: #fbaf5a;">
                        <template #title>
                            <span style="color: #fbaf5a;">个人设置</span>
                        </template>
                        <el-menu-item-group style="color: #fbaf5a;">
                            <el-menu-item index="1-1" @click="infoClick" style="color: #fbaf5a;">
                                <span>基本信息</span>
                            </el-menu-item>
                            <el-menu-item index="1-2" @click="updateInfoClick" style="color: #fbaf5a;">
                                <span>更新信息</span>
                            </el-menu-item>
                            <el-menu-item index="1-3" @click="myAddressClick" style="color: #fbaf5a;">
                                <span>添加地址</span>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>
                    <el-sub-menu index="2" style="color: #fbaf5a;">
                        <template #title>
                            <span style="color: #fbaf5a;">我的购买</span>
                        </template>
                        <el-menu-item-group style="color: #fbaf5a;">
                            <el-menu-item index="2-1" @click="shoppingCarClick" style="color: #fbaf5a;">
                                <span>购物车</span>
                            </el-menu-item>
                            <el-menu-item index="2-2" @click="transitOrder" style="color: #fbaf5a;">
                                <span>运输中</span>
                            </el-menu-item>
                            <el-menu-item index="2-3" @click="finishOrder" style="color: #fbaf5a;">
                                <span>已收货</span>
                            </el-menu-item>
                            <el-menu-item index="2-4" @click="myOrderClick" style="color: #fbaf5a;">
                                <span>订单记录</span>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>

                    <el-sub-menu index="3" style="color: #fbaf5a;">
                        <template #title>
                            <span style="color: #fbaf5a;">我的店铺</span>
                        </template>
                        <el-menu-item-group style="color: #fbaf5a;">
                            <el-menu-item index="3-1" @click="applyStore" style="color: #fbaf5a;"
                                v-show="hasStore === false">
                                <span>店铺申请</span>
                            </el-menu-item>
                            <el-menu-item index="3-2" @click="myCommoditiesClick" style="color: #fbaf5a;"
                                v-show="hasStore === true">
                                <span>管理店铺</span>
                            </el-menu-item>
                            <el-menu-item index="3-3" @click="myStore" style="color: #fbaf5a;"
                                v-show="hasStore === true">
                                <span>店铺信息</span>
                            </el-menu-item>
                            <el-menu-item index="3-4" @click="addCommodityClick" style="color: #fbaf5a;"
                                v-show="hasStore === true">
                                <span>添加商品</span>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>
                    <el-menu-item index="4" @click="myMessage" style="color: #fbaf5a;">
                        <el-badge :value="num" :max="10" :offset="[20, 27]" :show-zero="false">
                            <span>我的消息</span>
                        </el-badge>
                    </el-menu-item>
                    <el-sub-menu v-show="isAdmin === 1 ? true : false" index="5" style="color: #fbaf5a;">
                        <template #title>
                            <span style="color: #fbaf5a;">管理员</span>
                        </template>
                        <el-menu-item-group style="color: #fbaf5a;">
                            <el-menu-item index="4-1" @click="addRecommend" style="color: #fbaf5a;">
                                <span>推荐管理</span>
                            </el-menu-item>
                            <el-menu-item index="4-2" @click="adminApplyStore" style="color: #fbaf5a;">
                                <span>店铺申请审核</span>
                            </el-menu-item>
                            <el-menu-item index="4-3" @click="adminApplyCommodity" style="color: #fbaf5a;">
                                <span>商品上架审核</span>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>
                </el-menu>
            </el-col>
        </el-col>
        <el-col :span="18" style="height: 100%;overflow-x: hidden;overflow-y: hidden;">
            <router-view />
        </el-col>
    </el-row>

</template>
<style>
.sider {
    border-radius: 15px;
    box-shadow: 0px 0px 1px 1px #fbaf5a;
}

.header_profile {
    width: 100%;
    height: 90px;
    background-color: #fbaf5a;
    padding: 20px;
}

.imgInfo {
    border-radius: 50%;
    width: 45%;
    border-color: white;
    border-width: 10px;
    border-style: solid;
}
</style>
